En este ejemplo, la imagen se ubicará a la derecha en el párrafo, y el texto en el párrafo se ajustará alrededor de la imagen.
Las flores son un símbolo universal de belleza y alegría. Su variedad de colores, formas y aromas las convierte en un elemento fascinante de la naturaleza. Cada flor tiene su propio lenguaje, transmitiendo emociones y mensajes a través de sus pétalos
En este ejemplo, la imagen se ubicará a la izquierda en el párrafo, y el texto en el párrafo se ajustará alrededor de la imagen.
Las flores son un símbolo universal de belleza y alegría. Su variedad de colores, formas y aromas las convierte en un elemento fascinante de la naturaleza. Cada flor tiene su propio lenguaje, transmitiendo emociones y mensajes a través de sus pétalos
En este ejemplo, la imagen se ubicará sin flotar en el párrafo, y el texto en el párrafo se ajustará alrededor de la imagen.
Las flores son un símbolo universal de belleza y alegría. Su variedad de colores, formas y aromas las convierte en un elemento fascinante de la naturaleza. Cada flor tiene su propio lenguaje, transmitiendo emociones y mensajes a través de sus pétalos
En este ejemplo, los tres divs flotarán uno al lado del otro.
En este ejemplo, exploraremos cómo los elementos flotantes pueden afectar el diseño de una página web y cómo podemos corregir estos problemas utilizando la propiedad clearfix.
En esta sección, se muestra un contenedor con una imagen flotante. La imagen se coloca a la derecha del contenedor, pero como es más alta que el contenedor, el flujo de contenido de la página se ve afectado y el contenedor se colapsa, causando un desbordamiento del contenido.
Esta es una demostración de cómo el contenedor no ajusta su altura para incluir el contenido flotante. Si no se utiliza la propiedad clearfix, el contenedor no se adapta correctamente y los elementos que siguen pueden verse afectados visualmente.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue.
En esta sección, hemos agregado una clase clearfix al contenedor. La clase clearfix utiliza la propiedad overflow: auto;, lo que obliga al contenedor a ajustarse a la altura de los elementos flotantes, corrigiendo así el problema del desbordamiento.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue.
Coloca imágenes una al lado de la otra utilizando flotado:
Nota que también usamos el hack de clearfix para manejar el flujo del diseño, y añadimos la propiedad box-sizing para asegurarnos de que el contenedor de la imagen no se rompa debido al relleno adicional. Intenta eliminar este código para ver el efecto.